<template>
  <div class="key-management">
    <img @click="router({path: './addKey'})" src="@/assets/jihuo11.png" class="manage-img" alt="">
    <p class="title">——  我的密钥  ——</p>
    <div class="key-list" v-if="lists && lists.length > 0">
      <div v-for="(item,index) in lists" :key="index" class="item" :class="item.class_name"  @click="inputMessage.is_show = 'true', inputMessage.num = item.id, inputMessage.sendCon=item.miyao_username">
        <span></span>
        <div class="cons">
          <p class="key-title" v-if="item.type=='1'">会员密钥</p>
          <p class="key-title" v-else-if="item.type=='2'">VIP会员密钥</p>
          <p class="key-title" v-else-if="item.type=='3'">SVIP会员密钥</p>
          <p class="key-title" v-else-if="item.type=='4'">增量密钥</p>
          <p class="key-title" v-else-if="item.type=='5'">会员升级VIP密钥</p>
          <p class="key-title" v-else-if="item.type=='6'">会员升级SVIP密钥</p>
          <p class="key-title" v-else-if="item.type=='7'">VIP升级SVIP密钥</p>
          <p class="key-title" v-else>----</p>
          <p class="key-time">{{item.jihuo_time}}</p>
          <p class="key-num">{{item.is_type_name}}  |  剩余次数 {{5-item.nums}}</p>
          <img src="@/assets/miyaoguanli05.png" class="edit-img" alt="">
          <!-- <p class="key-name" v-if="inputMessage.num == index">{{inputMessage.sendCon}}</p> -->
          <p class="key-name">{{item.miyao_username}}</p>
        </div>
      </div>
    </div>
    <p class="tip-none" v-else>当前暂无密钥，点击上方“密钥激活”去激活吧！</p>
    <!-- <model-input-box :inputMessage = "inputMessage" @sendMsgs="hasEditName"></model-input-box> -->

    <div class="input-box">
      <div class="mask-div" v-if="inputMessage.is_show">
        <div class="mask-bg" @click="inputMessage.is_show = false"></div>
        <div class="content">
          <img src="@/assets/miyaoguanli06.png" class="close" alt="" @click="inputMessage.is_show = false">
          <p class="title">{{inputMessage.title}}</p>
          <input type="text" v-model="inputMessage.sendCon" :placeholder="inputMessage.tip" maxlength="4">
          <span class="btn" @click="sendMsg">{{inputMessage.btn}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {keymanagement,updatemishi} from '@/api/api'
// import modelInputBox from '@/components/modelInputBox'

  export default {
    components: {
      // modelInputBox,
    },
    data () {
      return {
        keyLength: ['1'],
        inputMessage: {},
        lists:[],
        class_name: "",
      }
    },
    created () {
      this.detail()
      this.inputMessage = {
        title: '请输入密钥备注',
        tip: '请输入备注名称（不超过4个字）',
        btn: '确认',
        is_show: false,
        num: 0,
        sendCon: '密钥1'
      }
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      detail(){
        keymanagement('').then((res) =>{
          console.log(res)
          this.lists=res.data.data.list
          for(var i in this.lists){
            if(this.lists[i].is_type==1){
              this.lists[i].is_type_name='儿童测试'
            }else if(this.lists[i].is_type==2){
              this.lists[i].is_type_name='少年测试'
            }else if(this.lists[i].is_type==3){
              this.lists[i].is_type_name='成年测试'
            }else{
              this.lists[i].is_type_name='未分类'
            }
            if(this.lists[i].type == "4"){
              this.lists[i].class_name = "child";
            }else if(this.lists[i].type == "1" || this.lists[i].type == "2"){
              this.lists[i].class_name = "";
            }else{
              this.lists[i].class_name = "juvenile";
            }
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      clickBtn () {
        this.inputMessage.is_show = false
      },
      sendMsg () {
        this.inputMessage.is_show = false
        console.log(this.inputMessage)
        updatemishi(this.inputMessage.num, this.inputMessage.sendCon).then((res) =>{
          if(res.data.code==200){
            this.lists = [];
            this.detail()
          }
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
.key-management
  background-color #fff
  .manage-img
    padding 2.5rem 1.5rem
    box-sizing border-box
  .arrow
    position absolute
    right 2.6rem
    width 3.5rem
    top 4.8rem
  .title
    color #172F6D
    font-weight 500
    font-size 1.6rem
    text-align center
    height 1.6rem
    line-height 1.6rem
    margin-top 1.5rem
  .tip-none
    text-align center
    font-size 1.3rem
    color #999
    margin-top 4.5rem
  .key-list
    margin-top 1rem
    .item
      position relative
      height 16.5rem
      margin-top -1.7rem
      &:first-child
        margin-top 0
      span
        display: block;
        width: 96%;
        height: 16.8rem;
        background-image: url('../../assets/yinying11.png');
        background-size: 100%;
        position: absolute;
        background-repeat: no-repeat;
        margin-left: 2%;
        background-position-y: .6rem;
      .cons
        background:linear-gradient(45deg,rgba(112,112,112,1) 0%,rgba(125,125,125,1) 69%);
        width 88%
        margin-left 6%
        position absolute
        margin-top 2rem
        height 12.8rem
        border-radius .6rem
        padding 2rem 1.5rem
        box-sizing border-box
        .key-title
          color #fff
          font-size 1.8rem
          font-weight bold
          height 1.8rem
          line-height 1.8rem
        .key-time
          font-size 1.2rem
          color #fff
          height 1.2rem
          line-height 1.2rem
          margin-top 1.2rem
        .key-num
          position absolute
          bottom 2rem
          left 1.5rem
          font-size 1.2rem
          color #fff
        .edit-img
          position absolute
          width 3.4rem
          right 1.5rem
          top 2.3rem
        .key-name
          color #fff
          font-weight bold
          font-size 1.8rem
          position absolute
          right 1.5rem
          bottom 2rem
    .child
      span
        background-image url('../../assets/yinying22.png')
      .cons
        background:linear-gradient(45deg,rgba(202,169,135,1) 0%,rgba(220,200,176,1) 100%);
    .juvenile
      span
        background-image url('../../assets/yinying33.png')
      .cons
        background:linear-gradient(45deg,rgba(103,112,138,1) 0%,rgba(75,85,112,1) 100%);
  .input-box
    .content
      width 92%
      left 4%
      background-color #fff
      border-radius .3rem
      text-align center
      top 15.4rem
      padding 0 1.3rem
      padding-bottom 1.7rem
      box-sizing border-box
      .close
        position absolute
        width 2.3rem
        right 1.3rem
        top 1.6rem
      .title
        font-size 1.7rem
        line-height 1.7rem
        height 1.7rem
        color #333
        font-weight 500
        margin-top 2.2rem
        margin-bottom 2.5rem
      input
        border 1px solid #ccc
        height 4.8rem
        line-height 4.8rem
        color #333
        width 100%
        border-radius .3rem
        padding-left 1.7rem
        box-sizing border-box
        outline none
        font-size 1.5rem
      .btn
        height 5rem
        line-height 5rem
        display block
        width 100%
        color #fff
        font-size 1.7rem
        text-align center
        margin-top 1.7rem
        background-color #172F6D
        border-radius 100px
</style>
